<template>
  <view class="find-detail">
    <view class="detail-com">
      <view class="detail-title">
        {{ car.car_brand_name + car.car_series_name + car.car_model_name }}
      </view>
      <view class="detail-title-iem">
        <view class="detail-price">
          系统指导价：{{ Number(car.car_guide_price).toFixed(2) }} 万元
        </view>
        <view class="detail-area">
          {{ formatTimeOnlyWeek(car.created_at) }}
        </view>
      </view>
    </view>
    <view class="height"></view>
    <view class="detail-params">
      <view>
        <text class="params-fl">外观</text>
        <text class="params-fr">{{ car.appearance }}</text>
      </view>
      <view>
        <text class="params-fl">内饰</text>
        <text class="params-fr">{{ car.interior }}</text>
      </view>
      <view>
        <text class="params-fl">排放标准</text>
        <text class="params-fr">{{ car.emission_name }}</text>
      </view>
      <view>
        <text class="params-fl">上牌地</text>
        <text class="params-fr">{{ car.province_name + car.city_name }}</text>
      </view>
      <view>
        <text class="params-fl">寻车有效期</text>
        <text class="params-fr">{{ car.look_days_time }}</text>
      </view>
      <view>
        <text class="params-fl">寻车状态</text>
        <text class="params-fr">{{ car.look_type_name }}</text>
      </view>
      <view>
        <text class="params-fl">联系姓名</text>
        <text class="params-fr">{{ car.contact_name }}</text>
      </view>
      <view>
        <text class="params-fl">联系方式</text>
        <text class="params-fr">{{ car.contact_mobile }}</text>
      </view>
    </view>
    <view class="height"></view>
    <view class="detail-params-remark">
      <view class="remark-title">备注(选填)</view>
      <view>
        <text class="remark-info">{{ car.remark }}</text>
      </view>
    </view>
    <view class="height"></view>
  </view>
</template>

<script>
import { formatTimeOnlyWeek } from '@utils/index'
export default {
  name: 'Detail',
  props: {
    car: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {}
  },
  methods: {
    formatTimeOnlyWeek
  }
}
</script>

<style>
.height {
  width: 100%;
  height: 24rpx;
  background: #f9f9f9;
}
.find-detail {
  width: 100%;
  padding-bottom: 200px;
}
.find-detail .detail-com {
  padding: 24rpx 24rpx;
}
.find-detail .detail-title {
  display: inline-block;
  font-size: 32rpx;
  margin-bottom: 8rpx;
}
.find-detail .detail-title-iem {
  overflow: hidden;
}
.find-detail .detail-title-iem view {
  overflow: hidden;
  font-size: 28rpx;
  color: #999;
}
.find-detail .detail-price {
  float: left;
}
.find-detail .detail-area {
  float: right;
}
.detail-params {
  padding: 0 24rpx;
}
.detail-params-remark {
  padding: 24rpx;
}
.detail-params view {
  padding: 24rpx 0;
  border-bottom: 2rpx solid rgba(238, 238, 238, 0.5);
}
.detail-params .params-fl {
  display: block;
  float: left;
  width: 160rpx;
  font-size: 28rpx;
  color: #000;
}
.detail-params .params-fr {
  display: block;
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #000;
}
.remark-title {
  margin-bottom: 24rpx;
  font-size: 28rpx;
}
.remark-info {
  font-size: 26rpx;
}
</style>
